<template>
	<div style="display: flex;flex-direction: row;width: 100%;">
		<div id="replaypane_container"></div>
		<div style="width: 40%;height: 40%;position: absolute;top: 2%;left: 2%; background-color: black;">
			<video :src="videoinfo.videosrc" id="replay_video" width="100%" height="100%">
			</video>
		</div>

		<el-card style="position: absolute;top: 2%;right: 2%;width: 25%;display: flex;flex-direction: column;">
			<div style="display: flex;flex-direction: column;width: 100%;">
				<span style="font-size:1.5ch;margin-top: 1%;">纬度:{{showdata.latitude}}</span>
				<span style="font-size:1.5ch;margin-top: 1%;">经度:{{showdata.longitude}}</span>
				<span style="font-size:1.5ch;margin-top: 1%;">高度:{{showdata.altitude}}</span>
				<span style="font-size:1.3ch;color: gray;" v-for="(value,key) in showdata"
					v-show="key!='latitude'&&key!='longitude'&&key!='altitude'">{{key}}:{{value}}</span>
			</div>
		</el-card>
		<el-card style="position: absolute;bottom: 2%;right: 2%;width: 25%;display: flex;flex-direction: column;">
			<div style="display: flex;flex-direction: row;justify-content: space-between; width: 100%;">
				<el-button size="small" type="success" :disabled="isPlay" @click="playVideo()">播放</el-button>
				<el-button size="small" type="danger" @click="stopVideo()">暂停</el-button>
			</div>
			<div style="margin-top: 2%; display: flex;flex-direction: row;justify-content: space-between; width: 100%;">
				<el-button size="small" type="text" @click="downloadVideo()">下载视频</el-button>
				<el-button size="small" type="text" @click="downloadTrack()">导出轨迹</el-button>
			</div>
		</el-card>
	</div>
</template>

<script>
	import AMapLoader from "@amap/amap-jsapi-loader"
	import prop from "../property/prop.json"
	import axios from "axios"
	import real_worker from 'worker-loader!@/worker/realtime'
	export default {
		data() {
			return {
				map: null,
				AMap: null,
				marker: null, //点标记

				userinfo: null,
				dronedeviceid: null,
				videoid: null,
				videoinfo: {},

				showdata: {}, //数据
				realtimedata: [],

				video: null,
				realtime_work: null, //实时数据展示线程
				pausedata: [],
				playtime: null,
				isPlay:false
			}
		},
		methods: {
			//导出视频
			downloadVideo() {

			},
			//导出轨迹
			downloadTrack() {

			},
			//播放
			playVideo() {
				this.isPlay = true
				if (this.video && this.realtimedata) {
					this.video.play();
					if (this.realtimedata.length > 0) {
						if (this.realtime_work) {
							var msg = {
								alldata: JSON.stringify(this.realtimedata),
								playtime: this.playtime
							}
							this.realtime_work.postMessage(msg)
						} else {
							this.initThread()
							var reverse_data
							if (this.pausedata.length <= 0) {
								reverse_data = this.realtimedata
								this.playtime = this.videoinfo.timemillis
							} else {
								reverse_data = this.pausedata.reverse()
							}

							var msg = {
								alldata: JSON.stringify(reverse_data),
								playtime: this.playtime
							}
							this.realtime_work.postMessage(msg)
						}
					}
				}
			},

			stopVideo() {
				this.isPlay = false
				if (this.video) {
					this.video.pause();
					if (this.realtime_work) {
						this.realtime_work.terminate()
						this.realtime_work = null
					}
				}
			},
			//video的控制
			bindVideo() {
				this.video = document.getElementById("replay_video");

			},
			//获取视频信息
			getVideoInfo() {
				//检查权限
				var that = this
				axios({
						url: prop.RequestUrl,
						method: "post",
						data: {
							requestCode: '029',
							userid: that.userinfo.userid,
							token: that.userinfo.token,
							videoid: that.videoid
						},
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
					})
					.then(function(response) {
						var data = response.data
						var result = data.result
						if (result == 1) {
							that.videoinfo = data.data
							that.videoinfo.timemillis = (new Date(data.data.createtime)).valueOf()
							that.getRealtimeData()
						} else if (result == 0) {
							that.tokenExpire()
						}
					})
			},

			//获取实时数据
			getRealtimeData() {
				//检查权限
				var that = this
				axios({
						url: prop.RequestUrl,
						method: "post",
						data: {
							requestCode: '024',
							userid: that.userinfo.userid,
							token: that.userinfo.token,
							timestamp: that.videoinfo.createtime,
							duration: that.videoinfo.duration,
							dronedeviceid: that.dronedeviceid
						},
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
					})
					.then(function(response) {
						var data = response.data
						var result = data.result
						if (result == 1) {
							//对齐实时数据
							console.log(that.videoinfo.timemillis)
							that.playtime = that.videoinfo.timemillis
							var data_arr = data.data
							that.realtimedata = data_arr
							that.initThread()
						} else if (result == 0) {
							that.tokenExpire()
						}
					})
			},

			//初始化实时数据展示线程
			initThread() {
				var that = this
				this.realtime_work = new real_worker()
				this.realtime_work.onmessage = (e) => {
					var data = e.data
					var type = data.type
					if (type == 1) {
						//即使消息
						that.showdata = JSON.parse(data.predata).data;
						that.setMarker(JSON.parse(data.predata).data)
						that.pausedata = JSON.parse(data.alldata)
					} else {
						//定位消息
						that.playtime = data.playtime
					}
				};
			},
			//设置点标记(或更改未知)
			setMarker(e) {
				if (this.marker == null) {
					var icon = new this.AMap.Icon({
						size: new this.AMap.Size(40, 50), // 图标尺寸
						image: 'https://mapleclouddata.oss-cn-beijing.aliyuncs.com/droneweb/drone_color.png', // Icon的图像
						imageSize: new this.AMap.Size(40, 50) // 根据所设置的大小拉伸或压缩图片
					})
					this.marker = new this.AMap.Marker({
						position: new this.AMap.LngLat(e.longitude, e.latitude),
						icon: icon, // 添加 Icon 实例
					})
					this.map.add(this.marker)
					this.map.setCenter(new this.AMap.LngLat(e.longitude, e.latitude))
				} else {
					this.marker.setPosition(new this.AMap.LngLat(e.longitude, e.latitude))
					this.map.setCenter(new this.AMap.LngLat(e.longitude, e.latitude))
				}
			},
			//初始化地图
			initMap() {
				AMapLoader.load({
					key: prop.AMapKey, //此处填入我们注册账号后获取的Key
					version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
					plugins: [''], //需要使用的的插件列表，如比例尺'AMap.Scale'等
				}).then((AMap) => {
					this.AMap = AMap
					this.map = new AMap.Map("replaypane_container", { //设置地图容器id
						layers: [
							new AMap.TileLayer.Satellite(),
							new AMap.TileLayer.RoadNet()
						],
						viewMode: "2D", //是否为3D地图模式
						zoom: 15, //初始化地图级别
					});
					this.getVideoInfo()
				}).catch(e => {
					console.log(e);
				})
			},
			//token过期
			tokenExpire: function() {
				this.$router.push({
					path: '/login',
				})
			},
			back() {
				this.$router.push({
					path: '/home',
				})
			},
		},
		mounted() {
			this.initMap()
			this.bindVideo()
			this.initThread()

			this.userinfo = JSON.parse(localStorage.getItem("userinfo"))
			this.dronedeviceid = this.$route.query.dronedeviceid
			this.videoid = this.$route.query.videoid
			if (this.userinfo == null || this.dronedeviceid == null) {
				this.$router.push({
					path: '/login',
				})
			}
		},
		beforeDestroy() {
			this.realtime_work.terminate();
		}
	}
</script>

<style>
	html,
	body {
		height: 100%;
		margin: 0;
		padding: 0;
	}

	#replaypane_container {
		width: 100%;
		height: 100%;
	}

	.amap-logo {
		display: none;
		opacity: 0 !important;
	}

	.amap-copyright {
		opacity: 0;
	}
</style>
